import React, { useState } from 'react';
import { Card, Button, Form, Input, message } from 'antd';
import {
    SettingOutlined, FileDoneOutlined, CheckOutlined, ExclamationCircleOutlined
    , VerticalAlignBottomOutlined
} from '@ant-design/icons';

import './index.scss';
function Config(props) {
    const [form] = Form.useForm();
    function onFinish() {
        message.success("网络配置已更新")
    }
    function onTest() {
        message.info('正在执行测试');
        message.success("测试连接成功")
    }
    function onReset() {
        form.resetFields();
    }
    return (
        <div className="config-container">
            <div className="row-a1">
                <div className="left">
                    <div className="con-a1">
                        <Card title={
                            <div className='title'>
                                <SettingOutlined style={{ color: '#08c' }} />
                                <span className="tit">服务器配置</span>
                            </div>
                        }>
                            <Form
                                form={form}
                                layout="vertical"
                                name="basic"
                                labelCol={{
                                    span: 8,
                                }}
                                wrapperCol={{
                                    span: 16,
                                }}
                                autoComplete="off"
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    label="服务器地址"
                                    name="ip"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入服务器地址',
                                        },
                                    ]}
                                    extra="包含协议和端口的完整地址"
                                >
                                    <Input placeholder='例如 192.168.10.10' />
                                </Form.Item>

                                <Form.Item
                                    label="料架序列号"
                                    name="subnet"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入料架序列号',
                                        },
                                    ]}
                                >
                                    <Input placeholder='例如 255.255.255.0' />
                                </Form.Item>

                                <Form.Item
                                    label="串口号"
                                    name="gateway"  // 修正字段名，从 "web" 改为 "gateway"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入默认网关!',  // 修正错误消息
                                        },
                                    ]}
                                    extra="示例: 192.168.10.1"
                                >
                                    <Input placeholder='Linux格式,留空使用默认值' />
                                </Form.Item>

                                <Form.Item>
                                    <Button className='test-btn' icon={<FileDoneOutlined />} type="primary" onClick={onTest}>
                                        测试连接
                                    </Button>
                                    <Button className='submit-btn' icon={<CheckOutlined />} type="primary" htmlType="submit">
                                        保存配置
                                    </Button>
                                    <Button className='reset-btn' type="primary" onClick={onReset}>
                                        重置
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Card>
                    </div>
                </div>
                <div className="right">
                    <div className="con-a2">
                        <Card title={
                            <div className='title'>
                                <ExclamationCircleOutlined style={{ color: '#08c' }} />
                                <span className="tit">配置信息</span>
                            </div>
                        }>
                            <div className="info">
                                <div className="icon">
                                    <ExclamationCircleOutlined style={{ color: '#0c5460' }} />
                                </div>
                                <div className="text">
                                    <div className="txt">
                                        <span className='tit'>
                                            运行状态：
                                        </span>
                                        <span className='in'>
                                            运行中
                                        </span>
                                    </div>
                                    <div className="txt">
                                        <span className='tit'>
                                            软件版本：
                                        </span>
                                        <span className='in'>
                                            1.92
                                        </span>
                                    </div>
                                    <div className="txt">
                                        <span className='tit'>
                                            最后更新：
                                        </span>
                                        <span className='in'>
                                            2025-10-20 14:23
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div className="list">
                                <div className="li">
                                    <div className="tit">
                                        服务器地址
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            192.168.101.108
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        料架序列号
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            SO1542-03
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                    <div className="con-a3">
                        <Card title={
                            <div className='title'>
                                <span className="tit">快速操作</span>
                            </div>
                        }>
                            <div className="btn download">
                                <div className="icon">
                                    <VerticalAlignBottomOutlined />
                                </div>
                                <div className="text">
                                    下载配置模板
                                </div>
                            </div>
                            <div className="btn export">
                                <div className="icon">
                                    <VerticalAlignBottomOutlined />
                                </div>
                                <div className="text">
                                    导出当前配置
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Config;